<template>
  <div class="classify">
    <div class="video-card">
      <video
        :src="videoList ? videoList.url : ''"
        width="100%"
        height="210"
        autoplay
        muted
        controls
      ></video>
    </div>
    <van-tabs class="xuanxiang" v-model="active" swipeable>
      <van-tab title="简介">
        
        <h5>{{ titleCont ? titleCont.title : "" }}</h5>
        <div class="team-list">
          <div class="title-class" v-for="(item,index) in teamClass" :key="item.id+index">
            <span>{{ item.category_name }}-{{ item.sub.category_name }}</span>
          </div>
          <div class="time-chuo">{{ formatDate(this.addTime) }}</div>
          <div class="video-view">
            {{
              this.titleCont ? getPlay(this.titleCont.count.count_view) : ""
            }}w次播放
          </div>
        </div>

        <div class="title-content">
          <input type="checkbox"  id="exp" >
          <div class="text">
            <label class="btn" for="exp"></label>
            <span>  {{ titleCont ? titleCont.content : "" }}</span>
          </div>
        
        </div>

        <div class="like-list">
          <div class="icon-list">
            <i class="iconfont icon-dianzan"></i>
            <i class="iconfont icon-shoucang"></i>
            <i class="iconfont icon-fenxiang"></i>
            <i class="iconfont icon-xiazai"></i>
          </div>
          <div class="like-data">
            <span>{{ titleCont ? titleCont.count.count_like : "" }}</span>
            <span>{{ titleCont ? titleCont.count.count_collect : "" }}</span>
            <span>{{ titleCont ? titleCont.count.count_share : "" }}</span>
            <span>下载</span>
          </div>
        </div>

        <div class="search-z">
          <span v-for="tag in titleCont ? titleCont.tags : ''" :key="tag.id">{{
            tag.name
          }}</span>
        </div>
        <div class="team-creator">
          <h5>创作人</h5>
          <div class="creator-list" @touchmove.stop="stopKove">
             <div
              class="writers"
              @click="getUserId(titleCont)"
            >
              <div class="writers-title">
                <img :src="titleCont?titleCont.author.userinfo.avatar:''" alt="" />
                <div class="occupation">
                  <span>{{titleCont?titleCont.author.userinfo.username:'' }}</span>
                  <p>{{titleCont?titleCont.author.userinfo. occupation:''}}</p>
                </div>
              </div>
              <div class="writer-btn">关注</div>
            </div>
            <div
              class="writers"
              v-for="(writer, index) in creators"
              :key="index"
              @click="getUserInfoId(writer)"
            >
              <div class="writers-title">
                <img :src="writer.userinfo.avatar" alt="" />
                <div class="occupation">
                  <span>{{ writer.userinfo.username }}</span>
                  <p>{{ writer.userinfo.occupation }}</p>
                </div>
              </div>
              <div class="writer-btn">关注</div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab
        class="content-list"
       
      >
       <template #title> 评论<van-icon  />{{total ? total.total : ''}}</template>
        <ul>
          <li v-for="cont in contentList" :key="cont.id">
            <div class="text-img">
              <img :src="cont.userInfo.avatar" alt="" />
            </div>
            <div class="text-content">
              <div class="text-context">
                <span class="username">{{ cont.userInfo.username }}</span>
                <p class="text-contented">{{ cont.content }}</p>
              </div>
              <div class="text-time">
                <div class="data-day">
                  {{ formatDate(cont.userInfo.addtime) }}
                </div>
                <div class="content-icon">
                  <i class="iconfont icon-pinglun"></i>
                  <i class="iconfont icon-dianzan"></i>
                </div>
              </div>
            </div>
            <div class="icon-dian"><i class="iconfont icon-diandian"></i></div>
          </li>
        </ul>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Vue from "vue";
import { Tab, Tabs } from "vant";
Vue.use(Tab);
Vue.use(Tabs);
import { Toast } from "vant";
export default {
  data: function () {
    return {
      videoList: null,
      active: 2,
      titleCont: null,
      teamClass: null,
      addTime: null,
      creators: null,
      contentList: null,
      total: null,
    };
  },

  created: function () {
         Toast({
      message: "请稍后",
      icon: "https://img01.yzcdn.cn/vant/logo.png",
      duration: 0,
    });
    this.axios
      .get("https://apis.netstart.cn/xpc/article/" + this.$route.query.id)
      .then((res) => {
        this.videoList = res.data.data.video.content.progressive;
        this.videoList = this.videoList[this.videoList.length - 1];
        this.titleCont = res.data.data;
        this.teamClass = res.data.data.categories;
        this.addTime = res.data.data.author.userinfo.addtime;
        this.creators = res.data.data.team;
        console.log(this.creators);
        console.log(this.titleCont);
        Toast.clear();
      });
          Toast({
      message: "请稍后",
      icon: "https://img01.yzcdn.cn/vant/logo.png",
      duration: 0,
    });
    this.axios
      .get(
        "https://apis.netstart.cn/xpc/comments?resource_id=" +
          this.$route.query.id
      )
      .then((res) => {
        this.contentList = res.data.data.list;
        this.total = res.data.data;
      
       Toast.clear();
      });
  },
  computed: {
    ...mapState(["videoId"]),
  },
  methods: {
    formatDate(addTime) {
      var year = new Date(addTime * 1000).getFullYear();
      var month = new Date(addTime * 1000).getMonth() + 1;
      var date = new Date(addTime * 1000).getDate();
      // if (month > 9) {
      //   return 0 + month;
      // }
      // if (date > 9) {
      //   return 0 + date;
      // }
      //  var hour=new Date(addTime*1000).getHours();
      //  var minute=new Date(addTime*1000).getMinutes();
      //  var second=new Date(addTime*1000).getSeconds();
      return year + "-" + month + "-" + date;
    },
    getPlay: function (value) {
      return (value / 10000).toFixed(1);
    },
    stopKove:function(){
      return false
    },
      getUserId(child){
      console.log("user",child.userid);
        this.$router.push({ path: "/user",query:{id:child.userid} })
      this.$store.commit("getIdVideo",{id:child.userid})
    },
       getUserInfoId(child){
      console.log("user",child.userinfo.id);
        this.$router.push({ path: "/user",query:{id:child.userinfo.id} })
      this.$store.commit("getIdVideo",{id:child.userinfo.id})
    }
  },
};
</script>

<style lang="less" scoped>
.classify {
  color: #000;
 
  .xuanxiang {
  
    h5 {
      font-size: 18px;
      margin: 10px;
    }
    .title-content {
      font-size: 14px;
      color: #555;
    margin-left: 10px;
      margin-bottom: 10px;
      display: flex;
      #exp{
        display: none;
      }
      #exp:checked+ .text{
         -webkit-line-clamp: 999;
        
      }
      #exp:checked+.text .btn::after{
    content:'收起';
    color: rgb(223, 148, 148);
    
  }
      .text{
         display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
        &::before{
          content: '';
          float: right;
          height: 100%;
          margin-bottom: -20px;
        }
        .btn{
          float: right;
          clear: both;
          margin-right: 8px;
          &::after{
            content: '展开';
             color: rgb(223, 148, 148);
          }
          
        }
        
      }
    }
    .team-list {
      display: flex;
      font-size: 14px;
      color: #999;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 10px;
      margin-left: 10px;
      .title-class {
        margin-right: 5px;
      }
      .time-chuo {
        margin-right: 5px;
      }
    }
    .like-list {
      display: flex;
      flex-wrap: wrap;
      text-align: center;
      .icon-list {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;

        i {
          font-size: 24px;
          width: 20%;
        }
      }

      .like-data {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 14px;
        span {
          width: 20%;
        }
      }
    }
    .search-z {
      display: flex;
      justify-content: flex-start;
      margin: 10px 0;
      border-top: 1px solid rgba(219, 214, 214, 0.212);
      border-bottom: 1px solid rgba(219, 214, 214, 0.212);
      span {
        font-size: 12px;
        color: #999;

        background: #eee;
        padding: 5px;
        border-radius: 8px;
        margin: 10px 8px;
        flex-shrink: 0;
      }
    }
    .team-creator {
      width: 100%;
      margin: 10px;
      border-bottom: 1px solid rgba(219, 214, 214, 0.212);
      h5 {
        margin: 0;
      }
      .creator-list {
        display: flex;
        overflow-x: auto;

        .writers {
          display: flex;
          justify-content: space-between;
          flex-shrink: 0;
          width: 60%;
          margin: 10px;
          align-items: center;
          border-radius: 10px;
          box-shadow: 0px 0px 2px 3px rgba(233, 225, 225, 0.2);
          padding: 10px 8px;
          .writers-title {
            width: 70%;
            display: flex;
            align-items: center;
            img {
              width: 40px;
              height: 40px;
            
              border-radius: 50%;
            }
            .occupation {
              margin-left: 8px;
              margin-top: 8px;
              span {
                font-size: 15px;
                font-weight: 600;
              }
              p {
                font-size: 12px;
                margin: 0;
                color: #999;
              }
            }
          }
          .writer-btn {
            background: rgba(230, 48, 48, 0.229);
            padding: 5px 10px;
            border-radius: 14px;
            color: red;
          }
        }
      }
    }
  }
  .content-list {
    ul {
      width: 100%;
      li {
     
        display: flex;
        justify-content: space-evenly;
        margin: 10px;
        .text-img {
    
          img {
            width: 30px;
          }
        }
        .text-content {
          flex: 1;
          margin-left: 10px;
          .text-context {
            .username {
              font-size: 14px;
              color: #555;
            }
            p {
              margin: 0;
            }
          }
          .text-time{
            display: flex;
            justify-content: space-between;
            .data-day{
              font-size: 14px;
              width: 50%;
            }
            .content-icon{
              width: 50%;
              display: flex;
              justify-content: flex-end;
              align-items: center;
              i{
                margin-right: 10px;
              }
            }
          }
        }
      }
    }
  }
}
</style>